<template>
  <div>
    <div class="page-header flex align-center space-between">
      <div>
        <span class="font-weight--lg font-size--lg">发布渠道</span>
        <span class="font-size--sm text-gray margin_left_6">创建的商品可以下发到以下渠道</span>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="page-body">
      <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="configChannelOption(0)" v-if="roleBtns.includes('sys:department:addchannel') || $store.getters.isAdmin" :disabled="currentNode && !currentNode.isEnable">配置渠道</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="channelRemoveOption(0)" v-if="roleBtns.includes('sys:department:delchannel') || $store.getters.isAdmin">批量删除</el-button>
      </div>
      <el-table class="margin_top_20" max-height="720" stripe :data="channelData" :header-cell-style="tableHeaderStyle" row-key="id" v-loading="channelLoading" @selection-change="handleChannelSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="channelName" label="渠道名称"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleChannelSizeChange" @current-change="handleChannelPagingChange" :current-page="channelIndex" :page-sizes="pageSizes"
          :page-size="channelSize" :layout="paginationLayout" :total="channelCount">
        </el-pagination>
      </div>
    </div>

    <div class="page-header flex align-center space-between">
      <div>
        <span class="font-weight--lg font-size--lg">接收渠道</span>
        <span class="font-size--sm text-gray margin_left_6">本部门优先看到以下渠道的商品</span>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="page-body">
      <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="configChannelOption(1)" v-if="roleBtns.includes('sys:department:addchannel') || $store.getters.isAdmin" :disabled="currentNode && !currentNode.isEnable">配置渠道</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="channelRemoveOption(1)" v-if="roleBtns.includes('sys:department:delchannel') || $store.getters.isAdmin">批量删除</el-button>
      </div>
      <el-table class="margin_top_20" max-height="720" stripe :data="pageData" :header-cell-style="tableHeaderStyle" row-key="id" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="channelName" label="渠道名称"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
      </div>
    </div>

    <channel-group :visible.sync="isShowChannelModel" :node="currentNode" :type="channelType" @update="getChannelDataList"></channel-group>
  </div>
</template>

<script>
import Setting from '@/settings';
import { mapGetters } from 'vuex';
import { GetDepartmentChannelList, DeleteDepartmentChannel } from '@/views/user-management/services/index';
import ChannelGroup from '@/views/user-management/components/channelGroup';

export default {
  components: {
    ChannelGroup
  },
  props: {
    currentNode: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      title: '',
      channelType: 0,
      pageIndex: 1,
      channelIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      channelSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      channelData: [],
      pageCount: 0,
      channelCount: 0,
      loading: false,
      channelLoading: false,
      isShowChannelModel: false,
      multipleSelection: [],
      multipleChannelSelection: []
    }
  },
  watch: {
    currentNode: {
      immediate: true,
      handler: function (newValue) {
        if (!newValue) return;
        this.getChannelDataList(0);
        this.getChannelDataList(1);
      }
    }
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    configChannelOption(type) {
      this.channelType = type;
      this.isShowChannelModel = true;
    },
    channelRemoveOption(type) {
        if (type == 0) {
            if (!this.multipleChannelSelection || !this.multipleChannelSelection.length) {
                this.$message.warning('请选择需要删除的发布渠道!');
                return;
            }
        } else {
            if (!this.multipleSelection || !this.multipleSelection.length) {
                this.$message.warning('请选择需要删除的接收渠道!');
                return;
            }
        }
      this.$confirm(type == 0 ? '删除渠道后，部门下将无法向该渠道下发商品, 是否继续?' : '删除渠道后，本部门将无法看到以下渠道的商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            let ids = [];
            if (type == 0) {
                ids = this.multipleChannelSelection.map(item => item.id).join(',');
            } else {
                ids = this.multipleSelection.map(item => item.id).join(',');
            }
            DeleteDepartmentChannel({ channelIds: ids, departmentId: this.currentNode.id, type: type })
              .then(data => {
                instance.confirmButtonLoading = false;
                if (data.code == 200) {
                  this.$message.success('删除成功!');
                  done()
                } else {
                  this.$message.success('删除失败!');
                }
              })
              .catch(error => {
                instance.confirmButtonLoading = false;
              })
          } else {
            done();
          }
        }
      }).then(() => {
        this.getChannelDataList(type);
      })
    },
    handleSelectionChange(selectlist) {
      this.multipleSelection = selectlist;
    },
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getChannelDataList(1);
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getChannelDataList(1);
    },
    handleChannelSelectionChange(selectlist) {
      this.multipleChannelSelection = selectlist;
    },
    handleChannelPagingChange(event) {
      this.channelIndex = event;
      this.getChannelDataList(0);
    },
    handleChannelSizeChange(event) {
      this.channelIndex = 1;
      this.channelSize = event;
      this.getChannelDataList(0);
    },
    getChannelDataList(type) {
      if (type == 0) {
        this.loading = true;
      } else {
        this.channelLoading = true;
      }
      GetDepartmentChannelList({
        proId: 4,
        type: type,
        depId: this.currentNode.id,
        pageNum: this.channelIndex,
        pageSize: this.channelSize
      })
        .finally(() => {
            if (type == 0) {
                this.loading = false;
            } else {
                this.channelLoading = false;
            }
        })
        .then(data => {
          if (data.code == 200) {
            if (type == 0) {
                this.channelData = data.data.list;
                this.channelCount = data.data.total;
            } else {
                this.pageData = data.data.list;
                this.pageCount = data.data.total;
            }
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
</style>
